/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Poppins',sans-serif;

background:#f5f7fb;

color:#222;

line-height:1.8;
}

/* HERO */

.article-hero{

height:70vh;

background:
linear-gradient(
rgba(5,20,45,.82),
rgba(5,20,45,.82)
),
url("../../images/itr-blog.jpg");

background-size:cover;
background-position:center;

display:flex;
justify-content:center;
align-items:center;

text-align:center;

padding:20px;
}

.article-overlay{

max-width:900px;
}

.article-overlay h1{

font-size:70px;

font-weight:800;

color:white;

margin-bottom:20px;

line-height:1.2;
}

.article-overlay p{

font-size:24px;

color:#dbeafe;
}

/* ARTICLE CONTAINER */

.article-container{

max-width:1100px;

margin:-80px auto 80px;

background:white;

padding:60px;

border-radius:30px;

box-shadow:
0 20px 60px rgba(0,0,0,.12);

position:relative;

z-index:2;
}

/* ARTICLE IMAGE */

.article-image{

width:100%;

height:500px;

object-fit:cover;

border-radius:20px;

margin-bottom:50px;
}

/* HEADINGS */

.article-content h2{

font-size:38px;

color:#0a2540;

margin-top:50px;

margin-bottom:20px;

position:relative;
}

.article-content h2::after{

content:"";

display:block;

width:80px;

height:4px;

background:#c9a227;

margin-top:10px;

border-radius:20px;
}

/* PARAGRAPHS */

.article-content p{

font-size:19px;

color:#444;

margin-bottom:20px;
}

/* LISTS */

.article-content ul,
.article-content ol{

padding-left:30px;

margin-top:20px;

margin-bottom:20px;
}

.article-content li{

margin-bottom:14px;

font-size:18px;

color:#444;
}

/* BENEFITS SECTION */

.article-content p br{

margin-bottom:10px;
}

/* CTA */

.article-cta{

margin-top:70px;

padding:60px;

border-radius:25px;

background:
linear-gradient(
135deg,
#0a2540,
#123d6d
);

text-align:center;

color:white;

box-shadow:
0 20px 40px rgba(10,37,64,.25);
}

.article-cta h3{

font-size:38px;

margin-bottom:15px;
}

.article-cta p{

color:#dbeafe;
}

.article-cta a{

display:inline-block;

margin-top:25px;

padding:16px 40px;

background:#c9a227;

color:#0a2540;

font-weight:700;

text-decoration:none;

border-radius:50px;

transition:.4s;
}

.article-cta a:hover{

transform:translateY(-4px);

box-shadow:
0 10px 25px rgba(201,162,39,.4);
}

/* FAQ SECTION */

.faq-section{

margin-top:70px;
}

.faq-item{

background:#f8fafc;

padding:25px;

border-radius:18px;

margin-bottom:20px;

border-left:5px solid #c9a227;

transition:.3s;
}

.faq-item:hover{

transform:translateY(-3px);
}

.faq-item h3{

font-size:24px;

color:#0a2540;

margin-bottom:10px;
}

/* TABLE OF CONTENTS */

.table-content{

background:#f8fafc;

padding:30px;

border-radius:20px;

margin-bottom:40px;
}

.table-content h3{

font-size:28px;

color:#0a2540;

margin-bottom:20px;
}

.table-content ul{

list-style:none;

padding-left:0;
}

.table-content li{

margin-bottom:12px;
}

.table-content a{

text-decoration:none;

color:#0a2540;

font-weight:600;
}

.table-content a:hover{

color:#c9a227;
}

/* MOBILE */

@media(max-width:900px){

.article-overlay h1{

font-size:42px;
}

.article-overlay p{

font-size:18px;
}

.article-container{

padding:30px 20px;

margin:-50px 15px 60px;
}

.article-image{

height:250px;
}

.article-content h2{

font-size:28px;
}

.article-content p,
.article-content li{

font-size:17px;
}

.article-cta{

padding:40px 20px;
}

.article-cta h3{

font-size:28px;
}

}